<template>
	<view class="change-container">
		<view class="change-content">
			<view v-if="changeMoneyList.length > 0" class="product-list">
				<view v-for="(item, index) in changeMoneyList" :key="index" class="product-card">
					<view class="product-header">
						<view class="product-name">{{ item.name }}</view>
						<view class="product-tag">灵活存取</view>
					</view>

					<view class="product-body">
						<view class="income-info">
							<view class="income-rate">
								<text class="rate-value">{{ (item.annualincome * 100).toFixed(2) }}</text>
								<text class="rate-unit">%</text>
							</view>
							<text class="rate-label">七日年化</text>
						</view>

						<view class="product-details">
							<view class="detail-item">
								<text class="detail-label">每万元收益</text>
								<text class="detail-value">{{ item.peiincome.toFixed(2) }}元</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">起投金额</text>
								<text class="detail-value">{{ item.invesmoney }}元</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">投资期限</text>
								<text class="detail-value">{{ item.investerm }}</text>
							</view>
						</view>
					</view>
					<view class="product-footer">
						<u-button type="primary" shape="circle" @click="handleBuy(item)" class="buy-btn">
							<text class="btn-text">立即投资</text>
						</u-button>
					</view>
				</view>
			</view>

			<u-empty v-else mode="data" text="很抱歉！暂时还没有零钱理财向您推荐"></u-empty>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			changeMoneyList: []
		}
	},
	onLoad() {
		this.getChangeMoneyList()
	},
	methods: {
		// 获取零钱理财列表
		async getChangeMoneyList() {
			uni.request({
				url: '/api/bf/change/list',
				method: 'GET',
				success: (res) => {
					this.changeMoneyList = res.data.changeMoneyList
				}
			})
		},
		// 处理购买
		handleBuy(item) {
			const user = uni.getStorageSync('user')
			uni.showModal({
				title: '提示',
				content: `确定买入 ${item.name} 吗？`,
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.request({
								url: '/api/bf/change/buyChangeMoney',
								method: 'POST',
								data: {
									changeMoneyId: item.id,
									user: user
								},
								success: (res) => {
									if (res.data === true) {
										uni.showToast({
											title: '买入成功',
											icon: 'success'
										})
									} else {
										uni.showToast({
											title: res.data.msg || '买入失败',
											icon: 'error'
										})
									}
								},
								fail: (err) => {
									uni.showToast({
										title: '网络错误',
										icon: 'error'
									})
								}
							})

						} catch (e) {
							console.error(e)
						}
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.change-container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;

	.change-header {
		margin-bottom: 30rpx;
		padding: 20rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}

	.change-content {
		padding: 0 20rpx;
	}

	.product-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.product-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		.product-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.product-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.product-tag {
				font-size: 24rpx;
				color: #2979ff;
				background-color: rgba(41, 121, 255, 0.1);
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}
		}

		.product-body {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.income-info {
				text-align: center;

				.income-rate {
					display: flex;
					align-items: baseline;

					.rate-value {
						font-size: 48rpx;
						font-weight: bold;
						color: #ff4d4f;
					}

					.rate-unit {
						font-size: 28rpx;
						color: #ff4d4f;
					}
				}

				.rate-label {
					font-size: 24rpx;
					color: #999;
				}
			}

			.product-details {
				display: flex;
				flex-direction: column;
				gap: 10rpx;

				.detail-item {
					display: flex;
					justify-content: space-between;

					.detail-label {
						font-size: 24rpx;
						color: #999;
					}

					.detail-value {
						font-size: 24rpx;
						color: #333;
					}
				}
			}
		}

		.product-footer {
			display: flex;
			justify-content: center;

			.buy-btn {
				width: 80%;
				height: 80rpx;
				background: linear-gradient(90deg, #2979ff, #36cfc9);
				border: none;
				box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);

				.btn-text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
